/**
 * 带下拉选择器的输入框
 * Created by trj on 2019/11/11
 */
import React, {useState } from 'react';
import { Input, Select } from "antd";
import _ from 'lodash';

const InputGroup = Input.Group;
const Option = Select.Option;
const InputSelect = (props) => {
    const [inputVal,setInputVal] = useState(props.value ? props.value.inputVal : '');
    const [selectVal,setSelectVal] = useState(props.value ? props.value.selectVal : '');
    const onInputChange = (e) => {
        setInputVal(e.target.value)
        props.onChange({
            inputVal: e.target.value,
            selectVal: this.state.selectVal,
        });
    };

    const onSelectChange = (val) => {
        setSelectVal(val)
        props.onChange({
            inputVal: this.state.inputVal,
            selectVal: val,
        });
    };
        const { options } = props;
        return (
            <InputGroup compact>
                <Input onChange={onInputChange} style={{ width: '50%' }} value={inputVal} />
                <Select style={{width: '80px'}} value={selectVal} onChange={onSelectChange}>
                    {options.map(item => {
                        return (<Option value={item.value}>{item.label}</Option>);
                    })}
                </Select>
            </InputGroup>
        );
    }


export default InputSelect;
